<template>
  <div class="point-detail flex flex-column">
    <tabs-group
      style='width: 100%'
      :data-list="typeList"
      v-model="handle_status"
      @change="() => $refs.warningTable.load()"
      class="flex-fixed"
    />
    <div class="detail-list flex-auto-height flex flex-column">
      <radio-button-group
        class="flex-fixed"
        v-model="warn_type_code"
        option-type="button"
        :options="radioList"
        @change="() => $refs.warningTable.load()"
      />
      <div style="margin: 15px 0">
        <antd-form :col-span="12" :options="formOptions" @submit="formSubmit" />
      </div>
      <common-table
        :fetch-params="paramsData"
        :fetch="getTableList"
        :columns="columns"
        class="flex-auto-height"
        ref="warningTable"
        :show-toolbar="false"
        @vue:mounted="() => $refs.warningTable.load()"
      >
        <template #action="{ scope }">
          <span style="color: #62b8b1; cursor: pointer">
            <span @click="handleClick(scope)" v-if="handle_status == '0'">处理</span>
            <span style="margin: 0 6px" v-if="handle_status == '0'">|</span>
            <span @click="details(scope)">详情</span>
            <span style="margin: 0 6px">|</span>
            <span @click="homeDetails(scope)">网约房详情</span>
          </span>
        </template>
      </common-table>
    </div>
  </div>
</template>

<script>
import AntdForm from '@gis/lib/components/antd-form';
import TabsGroup from '@gis/lib/components/tabs-group.vue';
import areaCodeMixin from '@gis/lib/mixins/areaCodeMixin.js';
import { dialog } from '@gis/lib/components/antd-dialog';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
import { alarmPageList, homestayWarningTypeHotel } from '@gis/lib/api';
import { handleTableRes } from '@gis/lib/utils/resolver.js';
import { getEnumText } from '@gis/lib/enums/index.js';

import { openAlarmDetailsDialog } from '../alarm/alarm-details.js';
import { openAlarmHandleDialog } from '../alarm/alarm-handle.js';
import { openHomestayDetailsDialog } from '../net-room/opt.js';
import get from 'lodash-es/get.js';

export default {
  name: 'point-warning-list',
  components: {
    AntdForm,
    TabsGroup,
  },
  mixins: [areaCodeMixin],
  props: {
    yard_id: { type: String, default: '' },
  },
  data() {
    return {
      typeList: [
        { label: '未处理', value: '0' },
        { label: '已处理', value: '1' },
      ],
      handle_status: '0',
      radioList: [],
      warn_type_code: 'D0142_3_2,D0142_3_3,D0142_3_4',
      formData: {},
      keyEnum: {
        所有: 'D0142_3_2,D0142_3_3,D0142_3_4',
        重点人员入住预警: 'D0142_3_4',
        长时间未登记预警: 'D0142_3_2',
        入住超额预警: 'D0142_3_3',
      },
      columns: [
        // {
        //   title: '经营人',
        //   dataIndex: 'manager',
        // },
        {
          title: '预警类型',
          dataIndex: 'warn_type_name',
        },
        {
          title: '预警地点',
          dataIndex: 'warn_place',
        },
        {
          title: '预警描述',
          dataIndex: 'warn_content',
        },
        {
          title: '处理结果',
          dataIndex: 'handle_status',
          customRender: (v) => getEnumText('alarmHandleStatus', v),
        },
        {
          title: '处理时间',
          dataIndex: 'handle_time',
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          width: 240,
          align: 'center',
        },
      ],
    };
  },
  computed: {
    formOptions() {
      return [
        {
          component: 'a-range-picker',
          label: '预警时间范围',
          field: 'start_time,end_time',
          props: {
            showTime: true,
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
          },
        },
      ];
    },
    apiParams() {
      const { area_code } = useUserInfoStore();
      return {
        area_code: area_code,
        yard_id: this.yard_id,
        handle_status: this.handle_status,
      };
    },
    paramsData() {
      return Object.assign({}, this.formData, this.apiParams, {
        warn_type_code: this.warn_type_code,
        handle_status: this.handle_status,
        yard_id: this.yard_id,
      });
    },
  },
  methods: {
    formSubmit(data) {
      this.formData = data;
      this.$nextTick(() => {
        this.$refs.warningTable.load();
      });
    },
    // 处理备注
    // handleClickNote(scope) {
    //   dialog({
    //     content: () => import('@/views/homestay-warning/components/point-detail/warning-handle-note.vue'),
    //     contentProps: {
    //       id: scope.id,
    //       content: scope.punishment_result,
    //     },
    //     dialogProps: {
    //       title: '预警处罚结果',
    //       onOk: () => this.$refs.warningTable.refresh(),
    //     },
    //   });
    // },
    // 预警处理
    handleClick(details) {
      openAlarmHandleDialog(details).then((res) => {
        if (res) this.$refs.warningTable.load();
      });
      // dialog({
      //   content: () => import('@/views/alarm/warning-handle.vue'),
      //   contentProps: {
      //     id: details.id,
      //   },
      //   dialogProps: {
      //     title: '预警记录处理',
      //     onOk: () => this.$refs.warningTable.refresh(),
      //   },
      // });
    },
    homeDetails(details) {
      openHomestayDetailsDialog(details);
    },
    details(details) {
      openAlarmDetailsDialog(details, get(details, 'warn_category_code', 'D0142_3'));
    },
    radioFormat(data) {
      if (data.name != '所有') {
        return `${data.name}(${data.key})`;
      } else {
        return data.name;
      }
    },
    async getDataAsync(params) {
      const { data = [] } = await homestayWarningTypeHotel(params);
      data.unshift({ name: '所有', value: 'D0142_3_2,D0142_3_3,D0142_3_4' });
      if (data.length) {
        data.forEach((item) => {
          item.label = item.name;
          item.key = item.value; //{label: '',value: ''}
          item.value = this.keyEnum[item.name];
        });
      }
      this.radioList = data;
      this.warn_type_code = data[0].key;
    },
    async getTableList(params) {
      if (!params.warn_type_code) return;
      return await handleTableRes(alarmPageList(params));
    },
  },
};
</script>

<style scoped lang="less">
.point-detail {
  width: 100%;
  height: 100%;
  .detail-list {
    padding: 15px;
    width: 100%;
  }
}
</style>
